<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-input v-model="searInfo.investmentAdviserName" style="width:120px;" placeholder="投资顾问" />
        <el-select v-model="searInfo.level" clearable style="width:120px;" placeholder="会员等级">
          <el-option
            v-for="item in levels"
            :key="item.levelCode"
            :label="item.levelNmae"
            :value="item.levelCode"
          />
        </el-select>
        <el-select v-model="searInfo.grouping" clearable style="width:140px;" placeholder="会员分类">
          <el-option
            v-for="item in memberLevel"
            :key="item.dicCode"
            :label="item.dicName"
            :value="item.dicCode"
          />
        </el-select>
        <el-date-picker
          v-model="registerTimer"
          style="width:260px;"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="注册日期"
          end-placeholder="截至日期"
        />
        <el-button type="primary" @click="searchInfoMation">搜 索</el-button>
      </div>
      <el-button
        v-if="accreditChildren.createMember"
        class="right"
        type="primary"
        @click="jump('create')"
      >新增会员</el-button>
    </div>
    <el-table ref="table" :data="tableData" border stripe :height="this.$getTableHeight">
      <el-table-column type="index" width="50" />
      <el-table-column label="会员昵称">
        <template slot-scope="scope">
          <span
            class="blue"
            @click.stop="changeActive(scope.row.id)"
          >{{ scope.row.id ?scope.row.nickName:'&nbsp;' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" />
      <el-table-column label="客户等级">
        <template slot-scope="scope">{{ getLevel(scope.row.level) }}</template>
      </el-table-column>
      <el-table-column prop="investmentAdviserName" label="投资顾问" />
      <el-table-column prop="growthvalue" label="会员分类" width="80">
        <template slot-scope="scope">{{ getGrouping(scope.row.grouping) }}</template>
      </el-table-column>
      <el-table-column label="注册时间" prop="creationTime" show-overflow-tooltip />
      <el-table-column prop="coin" label="金币余额" width="80" />
      <el-table-column prop="growthvalue" label="成长值" width="80" />
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.id">
            <span
              v-if="accreditChildren.deleteMember"
              class="_delete"
              @click="deleter(scope.row)"
            >删除</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination clearfix">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <div :class="active ? 'closeRightBox trans':'openRightBox trans'" @click.stop>
      <detail
        v-if="active"
        :id="jumpId"
        :accredit-children="accreditChildren"
        :page-height="pageHeight"
        :update-right="updateRight"
        @clearJumpId="clearJumpId"
        @editor="openDialog"
      />
    </div>
    <div v-if="dialogVisible" @click.stop>
      <el-dialog
        :title="isCreate ? '新增会员' : '编辑会员'"
        center
        :visible.sync="dialogVisible"
        width="800px"
        :close-on-click-modal="false"
        :before-close="handleClose"
      >
        <createAdver :id="jumpId" @closeDialog="handleClose" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Pagination from "~/components/commom/pagination";
import createAdver from "~/components/member/create";
import detail from "~/components/member/detail";
import mmUrl from "~/utils/utilUrl";
import {
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  reduceArr,
  createDics,
  changeTableHeight
} from "~/utils/util";
export default {
  components: {
    Pagination,
    detail,
    createAdver
  },
  data() {
    return {
      dialogVisible: false,
      updateRight: false,
      active: false,
      jumpId: "",
      registerTimer: null,
      isCreate: false,
      accreditArr: {},
      accreditChildren: {},
      changeSelectOr: false,
      loading: true,
      searInfo: {
        startTime: null,
        endTime: null,
        investmentAdviserName: null,
        grouping: "",
        keyword: "",
        level: "",
        type: 0
      },
      copysearInfo: {
        startTime: null,
        endTime: null,
        investmentAdviserName: null,
        grouping: "",
        keyword: "",
        level: "",
        type: 0
      },
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      },
      totalCount: 0,
      tableData: [],
      memberLevel: [],
      levels: []
    };
  },
  watch: {
    registerTimer(newd) {
      this.searInfo.startTime = newd[0] + " 00:00:00";
      this.searInfo.endTime = newd[1] + " 23:59:59";
    }
  },
  mounted() {
    const pathStr = this.$route.path;
    this.initGetData();
    const result = JSON.parse(sessionStorage.getItem("menu"));
    this.accreditArr = reduceArr(result, "/" + this.$route.name);
    this.accreditChildren = createDics(
      this.accreditArr.children,
      "permissionCode"
    );
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.updateRight = !this.updateRight;
      this.searchInfoMation("no");
    },
    clearJumpId() {
      this.active = false;
      this.jumpId = null;
    },
    openDialog() {
      this.isCreate = false;
      this.dialogVisible = true;
    },
    changeActive(id) {
      this.active = true;
      this.jumpId = id;
    },
    jumpGold(id) {
      _jump(this.$route.path);
      this.$router.push({ name: "memberGold", params: { id } });
    },
    jump(id) {
      this.dialogVisible = true;
      this.jumpId = id;
      id === "create" ? (this.isCreate = true) : (this.isCreate = false);
    },
    getLevel(res) {
      let result = "";
      this.levels.forEach(v => {
        if (v.levelCode === res) {
          result = v.levelNmae;
        }
      });
      return result;
    },
    getGrouping(res) {
      let result = "";
      this.memberLevel.forEach(v => {
        if (v.dicCode === res) {
          result = v.dicName;
        }
      });
      return result;
    },
    deleter(row) {
      const that = this;
      _deleteMethods(mmUrl.member.delete, row, that).then(() => {
        that.searchInfoMation("no");
      });
    },
    changeTableData(res) {
      const that = this;
      _changeTable(mmUrl.member.get, res, that);
    },
    searchInfoMation(res) {
      this.copysearInfo = JSON.parse(JSON.stringify(this.searInfo));
      const result = _searchInfo(res, this.page, this.copysearInfo);
      this.changeTableData(result);
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copysearInfo);
      this.changeTableData(result);
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copysearInfo);
      this.changeTableData(result);
    },
    initGetData(res) {
      const data = {};
      //  data.type = 0; //只查看投资人账户
      data.page = JSON.parse(JSON.stringify(this.page));
      Object.assign(data, this.copysearInfo);
      this.$post({
        url: mmUrl.member.pageLoad,
        data: data
      }).then(res => {
        this.tableData = res.items.items;
        this.totalCount = res.items.totalCount;
        this.loading = false;
        this.levels = res.levels;
        this.memberLevel = res.dicsMap.MEMBER_LEVEL.children;
        changeTableHeight(this);
      });
    }
  }
};
</script>

<style lang='scss' module>
.top_search {
  margin-bottom: 12px;
}
</style>
